<template>
  <view class="basic bgDefault tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
	
	<tn-nav-bar  fixed>{{title}}</tn-nav-bar>
	<view class="index_content">
		<view class="search-box tn-pl-sm tn-pr-lg bottom-search" @click="search()">
			<text class="tn-icon-search icon"></text>
			<text class="tn-pl-sm" style="color: #c8c9cc;">搜索</text>
		</view>
			
		<view class="tn-margin-top" >
			<view class="activity_list tn-margin-top-sm" v-for="(activity, index) in list" :key="index" @tap="detail(activity)">
				<div class="top">
					<view class="logo" :style="{ backgroundImage: 'url(' + activity.pic + ');'}"></view>
					<view class="right">
						<view class="title">
							<span style="margin-right: 20rpx;">{{activity.title}}</span>
						</view>
						<view class="location"><i class="tn-icon-clock icons"></i>时间：{{activity.start_time| parseTime('{y}-{m}-{d} {h}:{i}')}}-{{activity.end_time| parseTime('{m}-{d} {h}:{i}')}}</view>
						<view class="location"><i class="tn-icon-location icons"></i>距离：≥100KM</view>
						<view class="location location_price">
							<view class="price">￥{{activity.price}}/人</view>
							<view class="order-btn" @tap.stop="preOrder(activity.id)">立即报名</view>
						</view>
					</view>
				</div>
				
				<!-- <view class="footer">
					<view class="tn-float-left footer-left">
						<span><span style="color: #010000;">{{activity.user_entry_num}}</span>/{{activity.user_num}}人已参加</span>
						<span style="margin-left: 25rpx;">发布于  {{activity.created_at| parseTime('{m}-{d}')}} {{activity.nickname}}</span>
					</view>
					
					<view class="tn-float-right footer-right">
						<view class="price">￥{{activity.price}}/人</view>
						<view class="order-btn" @tap.stop="preOrder(activity.id)">立即报名</view>
					</view>
					
				</view> -->
			</view>
			
			<view class="empty__item" v-if="list.length < 1 && !loading" style="margin-top: 200px;">
			  <tn-empty mode="search"></tn-empty>
			</view>
			<TemplateLoading :active="loading"></TemplateLoading>
		</view>
		
		
		<view class="tn-padding-bottom-xs"></view>
	</view>
	

  </view>
</template>

<script>
  import {listObj} from '@/api/activity/index.js'
  import TemplateLoading from '../components/loading.vue'
  import {checkLogin} from '@/util/common.js'
  
  export default {
    name: 'mentorIndex',
	components:{TemplateLoading},
    data() {
      return {
		loading:false,
		swiperHeight:202,
		total:0,
		list: [],
		title:"社群活动",
		searchParam:{
			lat:"",
			lng:"",
			cate_id:"",
			keyword:"",
			space_id:"",
			page:1,
			size:10
		}
      }
    },
	onLoad(e) {
		if(e.cate_id){
			this.searchParam.cate_id = e.cate_id
		}
		if(e.keyword){
			this.searchParam.keyword =e.keyword
		}
		if(e.space_id){
			this.searchParam.space_id =e.space_id
		}
		this.selectData()
	},
    methods: {
		search(){
		  uni.navigateTo({
			url: '/pages/search/search?type=2'
		  })
		},
	  detail(item){
	  	uni.navigateTo({
	  	  url: '/pages/activity/detail?id='+item.id
	  	}) 
	  },
	  preOrder(id){
		if(checkLogin("/pages/index/index?index=1")){
			uni.navigateTo({
			  url: '/pages/order/confirm/activity?id='+id
			}) 
		}
	  },
	  
	  initData(){
		  this.loading = true
		  listObj(this.searchParam).then(res=>{
			this.loading =false
		  	this.list = res.data.data
			this.title = res.cate?.name || this.title
			this.total = res.data.total
		  },err=>{
			this.loading = false;
			 console.log(err)
		  })
		  
	  },
	  selectData(){
		  var _t = this
		  uni.getLocation({
		  	success: function(res) {
				_t.searchParam.lat = res.latitude
				_t.searchParam.lng = res.longitude
		  		_t.initData()
		  	},
		  	fail(err) {
		  		console.log(err)
		  		_t.initData()
		  	},
		  });
	  },
    }
  }
</script>

<style lang="scss" scoped>
	.bgDefault{
		height: 100vh;
		  background: $tn-main-bg;
		 .index_content{
			 padding: 0 7%;
		 }
	}
	.basic{
		font-family: "PingFangSCRegular";
		.submit-btn {
		  width: 100%;
		  background-color: $tn-main-orange;
		  color: #FFFFFF;
		  line-height: 105rpx;
		  font-size: 30rpx;
		  margin-top: 31rpx;
		}
	}
	.main_title{
		color: #FFFFFF;
		text-align: left;
		margin-top: 30rpx;
		font-size: 24rpx;
		font-weight: bold;
	}
	.mentor_title{color: $tn-main-orange;}
	.tn-radius10{border-radius: 10rpx;}
	.heightBig{height: 382rpx;}
	.heightSmall{height: 125rpx;background-size: contain;background-repeat: no-repeat;margin-bottom: 16rpx;}
	.right0{margin-right: 0;}
	.left0{margin-left: 0;}
	.top-tips{color: $tn-main-orange;font-size: 18rpx;margin-top: 18rpx;margin-bottom: 30rpx;letter-spacing: 1px;font-weight: bold;}
	.flex00{
	}
	.width-2{width: 47%;}
	
	.flex-2{
		justify-content: space-between;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}
	
	
	.search-box{
		height: 54rpx;
		width:100%; 
		background-color: #e5f3f9;
		//border:1px solid #FFF;
		border-radius: 27rpx;
		line-height: 54rpx;
		color: $tn-main-orange;
		font-size: 24rpx;
		padding: 0 10px;
		margin-top: 31rpx;
		.icon{
			font-size: 16px;
			margin-right: 5px;
			font-weight: bold;
		}
	}

  
  /* 内容容器 start */
  .bg-flex-shadow{
    background-color: #e2f1f9;
    z-index: 9999;
  }
  /* 内容容器 end */
  
  .activity_list{
  	  background: #FFFFFF;
  	  border-radius: 10rpx;
  	  //height: 173rpx;
  	  overflow: hidden;
  	  padding: 20rpx;
  	  float: unset;
  	  
  	  .space_image{
  		width: 48%;
  		background-size: cover;
  		height: 104rpx;
  	  }
  	  
  	  .top{
  		  overflow: hidden;
  		 .logo{
  		 		  background: url("https://www.zztengma.com/lihu/bumang/images/activityDefault.png") no-repeat  ;
  		 		  background-size: cover;
  		 		  width: 32%;
  		 		  height: 150rpx;
  		 		  float: left;
  		 }
  		 .right{
  		 		  float: right;
  		 		  // margin-top: 18rpx;
  		 		  width: 66%;
  		 		  .title{
  		 			font-size: 24rpx;
  		 			color: #333333;
  		 			font-weight: bold;
  		 		  }
  		 		  .location{
  					  color: #666666;
  		 			  margin-top: 8rpx;
  		 			  font-size: 20rpx;
  		 			  .icons{width: 20px;height: 20px;display: inline;margin-right: 7rpx;}
  		 			}
  					
  					.location_price{
  						display: flex;justify-content: space-between;
  						
  						.price{font-size: 28rpx;color: #333333;}
  						.order-btn{
  							background:$tn-main-orange;color: #FFFFFF;padding: 0 1px;border-radius: 10rpx;font-size: 28rpx;
  							height: 46rpx;
  							line-height: 46rpx;
  						}
  					}
  		 		  
  		 }
  		  
  	  }
  	  
  	  
  	  .footer{
  		  color: #666666;
  		  font-size: 12rpx;
  		  font-weight: bold;
  		  margin-top: 8rpx;
  		  .footer-left{
  			  width: 60%;
  		  }
  		  .footer-right{
  			  width: 40%;
  			  
  			  display: flex;justify-content: space-between;
  			  .price{color: $tn-main-orange;font-weight: bold;font-size: 24rpx;}
  			  .order-btn{background:$tn-main-orange;color: #FFFFFF;padding: 3rpx 6rpx;border-radius: 10rpx;font-size: 28rpx;font-weight: bold;margin-top: -8rpx;}
  		  }
  	  }
  }
</style>
